import { Form, Input, Button, Checkbox, Radio, Select,notification  } from 'antd';
import propTypes from 'prop-types';

const openNotificationWithIcon = (type,description)=>{
  notification[type]({
    message:"提示",
    description,
  })
}
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 },
};
import { Create,Update } from "@/api/user/menu";
class DynamicRule extends React.Component {
  static propTypes = {
    ButtonStatus: propTypes.number,
  };
  static defaultProps = {
    ButtonStatus: 0,
  };
  constructor(props) {
    super(props);
    const { ButtonStatus } = this.props;
    this.state = {
      checkNick: false,
      TreeId:'',
      ButtonTitle: '添加',
      Disabled: true,
      ButtonStatus: ButtonStatus,
      RadioVal: 1,
      from: {
        type: 1,
        name: '',
        icon: '',
        path: '',
        component: '',
        redirect: '',
      },
    };
  }
  componentWillReceiveProps(nextProps, nextContext) {
    const findOneTree = nextProps.findOneTree;
    console.log(findOneTree);
    this.setState({
      TreeId : findOneTree.id,
    })
    if (nextProps.ButtonStatus === 1 && !nextProps.status) {
      this.setState({
        //添加
        Disabled: false,
        ButtonStatus: 0,
        from: {
          type: 1,
          name: '',
          icon: '',
          path: '',
          component: '',
          redirect: '',
          parentId: findOneTree.id?findOneTree.id:-1,
          parentNodeName: findOneTree.name?findOneTree.name:"顶级",
        },
      });
    } else {
      this.setState({
        //其他
        Disabled: true,
        ButtonStatus: 1,
        from: {
          type: findOneTree.type,
          name: findOneTree.name,
          icon: findOneTree.icon,
          path: findOneTree.path,
          component: findOneTree.component,
          redirect: findOneTree.redirect,
          parentId: findOneTree.parent_id?findOneTree.parent_id:-1,
          parentNodeName: findOneTree.name?findOneTree.name:"顶级",
        },
      });
      if(this.state.Disabled){
        this.setState({
          RadioVal:findOneTree.type,
        })
      }
    }
    if (nextProps.status === 1) {
      //修改
      this.setState({
        Disabled: false,
        ButtonStatus: 1,
        from: {
          type: findOneTree.type,
          name: findOneTree.name,
          icon: findOneTree.icon,
          path: findOneTree.path,
          component: findOneTree.component,
          redirect: findOneTree.redirect,
          parentId: findOneTree.parent_id?findOneTree.parent_id:-1,
          parentNodeName: findOneTree.name?findOneTree.name:"顶级",
        },
      });
      if(this.state.Disabled){
        this.setState({
          RadioVal:findOneTree.type,
        })
      }
    }
  }

  ButtonState = () => {
    this.setState({
      Disabled: false,
    });
  };
  check = () => {
    this.props.form.validateFields((err,value) => {
      if (!err) {
        //添加
        if (!this.state.ButtonStatus) {
          //添加
          Create(value).then(res=>{
            console.log(res);
            openNotificationWithIcon('success',"创建成功")
            if(res&&res.code===0){
              this.setState({
                ButtonTitle: '添加',
              })
              this.props.FindAll();
            }
          })
        } else {
          value.id = this.state.TreeId;
          Update(value).then(res=>{
            if(res&&res.code===0){
              openNotificationWithIcon('success',"更新成功")
              console.log(res,"更新")
              this.props.FindAll();
            }
          })
          this.setState({
            ButtonTitle: '修改',
          });
        }
      }
    });
  };
  cancel = () => {
    //取消
    this.setState({
      Disabled: true,
    });
  };
  handleChange = e => {
    this.setState(
      {
        checkNick: e.target.checked,
      },
      () => {
        this.props.form.validateFields(['nickname'], { force: true });
      }
    );
  };
  onChangeVal = e => {
    console.log(e.target.value);
    this.setState({
      RadioVal: e.target.value,
      from:{
        type:e.target.value,
      }
    });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const state = this.state.from;
    const ButtonStatus = this.state.ButtonStatus;
    const RadiosValue = this.state.RadioVal;
    return (
      <div>
        <Form.Item {...formItemLayout} label="类型">
          {getFieldDecorator('type', {
            initialValue: state.type,
          })(
            <Radio.Group onChange={this.onChangeVal} disabled={this.state.Disabled}>
              <Radio value={1}>目录</Radio>
              <Radio value={0}>菜单</Radio>
            </Radio.Group>
          )}
        </Form.Item>
        <Form.Item {...formItemLayout} hasFeedback label="父级节点id">
          {getFieldDecorator('parentId', {
            initialValue: state.parentId,
            rules: [
              {
                required: true,
                message: '父级节点id',
              },
            ],
          })(<Input disabled={true} placeholder="父级节点id" />)}
        </Form.Item>
        <Form.Item {...formItemLayout} hasFeedback label="父级节点名称">
          {getFieldDecorator('NodeName', {
            initialValue: state.parentNodeName,
            rules: [
              {
                required: true,
                message: '父级节点名称',
              },
            ],
          })(<Input disabled={true} placeholder="父级节点名称" />)}
        </Form.Item>
        <Form.Item {...formItemLayout} hasFeedback label="名字">
          {getFieldDecorator('name', {
            initialValue: state.name,
            rules: [
              {
                required: true,
                message: '请输入菜单名称',
              },
            ],
          })(<Input disabled={this.state.Disabled} placeholder="请输入菜单名称" />)}
        </Form.Item>
        <Form.Item {...formItemLayout} hasFeedback label="图标">
          {getFieldDecorator('icon', {
            initialValue: state.icon,
            rules: [
              {
                required: true,
                message: '请输入菜单图标',
              },
            ],
          })(<Input disabled={this.state.Disabled} placeholder="菜单图标,user/form/table" />)}
        </Form.Item>
        <Form.Item {...formItemLayout} hasFeedback label="访问路径">
          {getFieldDecorator('path', {
            initialValue: state.path,
            rules: [
              {
                required: true,
                message: '访问路径',
              },
            ],
          })(<Input disabled={this.state.Disabled} placeholder="请输入访问路径" />)}
        </Form.Item>
        {RadiosValue ? null : (
          <Form.Item {...formItemLayout} hasFeedback label="前端组件">
            {getFieldDecorator('component', {
              initialValue: state.component,
              rules: [
                {
                  required: true,
                  message: '请输入前端组件',
                },
              ],
            })(<Input disabled={this.state.Disabled} placeholder="前端组件" />)}
          </Form.Item>
        )}
        <Form.Item {...formItemLayout} hasFeedback label="重定向">
          {getFieldDecorator('redirect', {
            initialValue: state.redirect,
            rules: [
              {
                required: false,
                message: '请输入重定向地址',
              },
            ],
          })(<Input disabled={this.state.Disabled} placeholder="重定向地址,没有可不填" />)}
        </Form.Item>
        {/* <Form.Item
          {...formItemLayout}
          label="隐藏子路由"
        >
          {getFieldDecorator('hideChildrenInMenu',{initialValue:"no"})(
            <Radio.Group>
              <Radio value="yes">是</Radio>
              <Radio value="no">否</Radio>
            </Radio.Group>
          )}
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          label="隐藏路由"
        >
          {getFieldDecorator('hideInMenu',{initialValue:'no'})(
            <Radio.Group>
              <Radio value="yes">是</Radio>
              <Radio value="no">否</Radio>
            </Radio.Group>
          )}
        </Form.Item> */}
        {/* <Form.Item
          {...formItemLayout}
          label="权限管理"
        >
          {getFieldDecorator('select-multiple', {
            rules: [
              { required: true, message: '请选择权限', type: 'array' },
            ],
          })(
            <Select mode="multiple" placeholder="Please select favourite colors">
              <Option value="red">Red</Option>
              <Option value="green">Green</Option>
              <Option value="blue">Blue</Option>
            </Select>
          )}
        </Form.Item> */}
        <Form.Item {...formTailLayout} hasFeedback>
          {this.state.Disabled ? null : (
            <Button type="primary" onClick={this.check}>
              {ButtonStatus ? '修改' : '添加'}
            </Button>
          )}
          <Button style={{ marginLeft: 20 }} onClick={this.cancel}>
            取消
          </Button>
        </Form.Item>
      </div>
    );
  }
}

const WrappedDynamicRule = Form.create({ name: 'dynamic_rule' })(DynamicRule);
export default WrappedDynamicRule;
